<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/file.css">
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/statics/css/admin.css"
	type="text/css" rel="stylesheet">
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
	function selectAll(all) {
		//取出所有的input指令元素
		var items = document.getElementsByTagName("input");
		//循环每一个元素并判断是否是复选框
		for (var i = 0; i < items.length; i++) {
			if (items[i].type == "checkbox") {
				//如果是复选框，则与全选的复选框一样的选中方式
				items[i].checked = all.checked;
			}
		}
	}
</script>

</head>
<body>
	<div class="main_con">
		<div class="main_con_top">
			<span class="wj">全部文件夹</span> <span class="wj_total">全部加载，共****个</span>
			<span><button class="upload" data-toggle="modal"
					data-target="#folderEdit" style="margin-left: 50px;"
					onclick="showupload()">修改文件夹名</button>

				<div class="modal fade" id="folderEdit" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="myModalLabel">修改文件夹名</h4>
							</div>
							<form id="form_data"
								action="${pageContext.request.contextPath}/folderEdit"
								method="post" enctype="multipart/form-data">
								<div class="modal-body">
									<input type="hidden" name="userId"
										value="${sessionScope.existUser.userId }" /> <input id="edit"
										type="hidden" name="folderId" value="" /> <input type="text"
										name="foleName" multiple="multiple" style="text-align: center"
										value="" />
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="submit" onclick="add_info()"
										class="btn btn-primary">提交</button>
								</div>
							</form>
						</div>
					</div>
				</div></span> <span><button class="upload" data-toggle="modal"
					data-target="#folderMove" style="margin-left: 50px;"
					onclick="showupload()">移动文件</button>

				<div class="modal fade" id="folderMove" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="myModalLabel">移动文件</h4>
							</div>
							<form id="form_data"
								action="${pageContext.request.contextPath}/folderList"
								method="post" enctype="multipart/form-data">

								<div class="modal-body">
									<input type="hidden" name="userId"
										value="${sessionScope.existUser.userId }" /> <input id="edit"
										type="hidden" name="folderId1" value="" /> <select
										name="folder" id="folder" onchange="chooseFolder()">
										<option value="">请选择</option>
										<c:forEach items="${sessionScope.folderList }" var="folder">
											<option value="${folder.folderId }">${folder.foleName }</option>


										</c:forEach>
									</select>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="submit" onclick="add_info()"
										class="btn btn-primary">提交</button>
								</div>
							</form>

						</div>
					</div>
				</div></span>
		</div>
		<div class="list-view">
			<ul>
				<li class="col first-col" style="width: 50%;"><input
					type="checkbox" class="check" onclick="selectAll(this)" /> <span
					class="span_wjm">文件夹名</span></li>
				<li class="col time_col" style="width: 20%; margin-left: 20px"><span>修改时间</span>
				<li class="col" style="width: 15%; margin-left: 20px"><span>大小</span></li>
				<li class="col last-col" style="width: 20%;"><span></span></li>
			</ul>

		</div>
	</div>
	<div class="list-view-container">
		<c:if test="${not empty getFolderById}">
			<c:forEach items="${getFolderById }" var="folder">
				<ul>
					<li class="col1 first-col1" style="width: 50%;"><input
						type="checkbox" class="check" /> <input type="hidden" id="folder"
						value="${folder.folderId}" /> <span class="span_wjm"><i
							class="fa fa-folder"></i><a href="folderList2/${folder.folderId}"
							style="">${folder.foleName}</a></span> <a href="" style="float: right"><span><i
								class="fa fa-share-alt"></i></span></a> <a
						href="downFile?folderId=${folder.folderId }" style="float: right"><span><i
								class="fa fa-download"></i></span></a> <a href="" style="float: right"><span><i
								class="fa fa-trash"></i></span></a></li>

					<li class="col1 time_col" style="width: 20%; margin-left: 20px"><span>1</span></li>
					<li class="col1" style="width: 15%; margin-left: 20px"><span>2</span></li>
					<li class="col1 last-col" style="width: 20%;"><span> </span></li>

				</ul>
			</c:forEach>
		</c:if>
	</div>
</body>
<script type="text/javascript">
	$(function() {
	});
	function showupload() {
		var $fileId = $(".first-col1 input[type=checkbox]:checked").parents(
				"li").find("#folder").val();
		//	alert($fileId);

		$(" #edit  ").val($fileId);
	}

	function chooseFolder() {
		var $selectedId = $('#folder option:selected').val();//选中的值
		/* alert($selectedId); */
		var $fileId = $(".first-col1 input[type=checkbox]:checked").parents(
				"li").find("#folder").val();
		/* alert($fileId); */
		var jsonStr = {
			"targetId" : $selectedId,
			"folderId" : $fileId
		}
		console.log(jsonStr);
		$.ajax({
			type : "POST",
			url : "${pageContext.request.contextPath}/folderMove",
			data : jsonStr,
			//datatype:"json", //此处不能省略   
			//contentType: "application/json; charset=utf-8",//此处不能省略   
			success : function(data) {
				//  alert(data);   
			},
			error : function(data) {
				//alert(data)  
			}
		});

	}
</script>
<script type="text/javascript">
	$(function() {
		//删除文件
		$(".fa-trash")
				.on(
						'click',
						function() {
							var $folderId = $(this).parents("li").find(
									"#folder").val();
							var $foleName = $(this).parents("li").find(
									".span_wjm").text();
							console.log($folderId + "," + $foleName);
							if (confirm("你确定要删除" + $foleName)) {
								$
										.ajax({
											url : "${pageContext.request.contextPath}/delFolder",
											type : "post",
											data : JSON.stringify({
												'folderId' : $folderId,
											}),
											contentType : 'application/json;charset=utf-8',
											async : true, //或false,是否异步
											success : function(msg) {
												console.log(msg);
												if (msg == "ok") {
													window.location.href = "${pageContext.request.contextPath}/showFile?typeId=0";
													/* window.location.href = "${pageContext.request.contextPath}/folderList"; */
												}
											},
											error : function(xhr) {
												/* 												alert(xhr.status)
												 */}
										});
							}
						});

	});
</script>
</html>